<template>
  <el-container>
  <el-main>
<el-row>
<el-col :span="20" :offset="1">
<el-tabs type="border-card">
<el-tab-pane label="文件任务">

<el-row>
  <el-col :span="10" :offset="4">
    <el-form :model="taskform" size="mini" label-width="180px">
      <el-divider>文件目录配置</el-divider>
      <el-form-item
        label="路径"
        prop="dbpath"
        :rules="[{required:true,message:'请选择路径',trigger:'blur'}]"
        v-if="taskform.dbtype == 'file'"
      >
        <el-input v-model="taskform.dbpath" autocomplete="off" :disabled="true">
          <el-button slot="append" icon="el-icon-search" @click="enableDirSearch('dbpath')"></el-button>
        </el-input>
      </el-form-item>
      <el-divider>任务配置</el-divider>
      <el-form-item
        label="保存路径"
        prop="savepath"
        :rules="[{required:true,message: '请输入保存路径', trigger: 'blur' }]"
      >
        <el-input v-model="taskform.savepath" :disabled="true">
          <el-button slot="append" icon="el-icon-search" @click="enableDirSearch('savepath')"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="是否加密">
          <el-col :span="4"><el-switch v-model="enablezippwd"></el-switch></el-col>
          <el-col :span="3" :offset="1" v-if="enablezippwd">密码:</el-col>
          <el-col :span="16" v-if="enablezippwd"><el-input v-model="taskform.zippwd" show-password ></el-input></el-col>
      </el-form-item>
      <el-form-item label="远程存储">
        <el-select v-model="taskform.rs" multiple>
          <el-option
            v-for="item in remotestorages"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="执行频率">
        <el-select v-model="pinlv" @change="changepinlv">
          <el-option
            v-for="item in $public.pinlvs"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日期" v-if="pinlv == 'month'">
        <el-select v-model="day" placeholder="请选择" @change="cjobs">
          <el-option
            v-for="item in $public.days"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="周" v-if="pinlv == 'week'">
        <el-select v-model="week" placeholder="请选择" @change="cjobs">
          <el-option
            v-for="item in $public.weeks"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间点">
        <el-time-picker
          v-model="times"
          placeholder="任意时间点"
          @change="createjobs"
          value-format="H m s"
        ></el-time-picker>
      </el-form-item>
      <el-form-item
        label="计划任务"
        prop="crontab"
        :rules="[
                  { required: true, message: '请输入 计划任务', trigger: 'blur' }
              ]"
      >
        <el-input v-model="taskform.crontab"></el-input>
      </el-form-item>
      <el-form-item label="本地备份保留数">
        <el-input-number v-model="taskform.expire" :min="1" :max="100"></el-input-number>个
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="testtask">测试执行</el-button>
        <el-button v-if="rowid"  type="success" @click="edittask">确定</el-button>
        <el-button v-else  type="success" @click="addtask">确定</el-button>
      </el-form-item>
    </el-form>
  </el-col>
</el-row>

    </el-tab-pane>
</el-tabs>
</el-col>
</el-row>

<el-dialog  title="请选择" :visible.sync="dialogDirVisible" v-if="dialogDirVisible">
  <dirlist :dialogDirVisible="dialogDirVisible" :key-name="keyName" @close="changeDir"></dirlist>
</el-dialog>

</el-main>
</el-container>
</template>
<script>
import Dirlist from "@/components/Dirlist.vue";

export default {
  components: { Dirlist },
  data() {
    return {
      dialogDirVisible: false,
      keyName: "",
      taskform: {
        dbtype: "file",
        crontab: "",
        rs: [],
        pause: "no",
        expire: 1,
      },
      day: "1",
      week: "1",
      times: "",
      pinlv: "day",
      enablezippwd: false,
      remotestorages: [],
      rowid:""
    };
  },
  created() {
    this.ftpGet();
    if(this.$route.query.id){
      this.rowid = this.$route.query.id
      this.GetOneTask(this.rowid)
    }
  },
  methods: {
    changeDir(dirpath) {
      this.taskform[dirpath.name] = dirpath.value;
      this.dialogDirVisible = false;
    },
    enableDirSearch(str) {
      this.keyName = str;
      this.dialogDirVisible = true;
    },
    ftpGet() {
      this.$http.Get(this.$api.ftps, { page: 1, count: -1 }, (res) => {
        this.remotestorages = res.data;
      });
    },
    changepinlv(e) {
      this.pinlv = e;
      this.cjobs();
    },
    createjobs(e) {
      this.times = e;
      this.cjobs();
    },
    testtask() {
      this.$http.Post(this.$api.jobtest, this.taskform, () => {});
    },
    addtask() {
      this.$http.Post(
        this.$api.task,
        this.taskform,
        () => {
          this.$router.go(-1)
        },
        "添加任务"
      );
    },
    edittask() {
      this.$http.Put(
        this.$api.task + "/" + this.taskform.id,
        this.taskform,
        () => {
          this.$router.go(-1)
        },
        "修改任务"
      );
    },
    cjobs() {
      var arrtimes = this.times.split(" ");
      var crontabstr = "";
      if (arrtimes.length === 3) {
        crontabstr = arrtimes[2] + " " + arrtimes[1] + " " + arrtimes[0];
        if (this.pinlv === "month" && this.day) {
          crontabstr = crontabstr + " " + this.day + " * *";
        } else if (this.pinlv === "week" && this.week) {
          crontabstr = crontabstr + " * * " + this.week;
        } else {
          crontabstr = crontabstr + " * * *";
        }
      }
      this.taskform.crontab = crontabstr;
    },
    GetOneTask(id) {
      this.$http.Get(this.$api.task + "/" + id, {}, (res) => {
        this.taskform = res;
      });
    },

  },
};
</script>